<!--
 * @Descripttion: 小型商品下拉框选择
 * @version:
 * @Author: cxguo
 * @Date: 2020-03-10 20:49:27
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:06:05
 -->
<template>
  <div>
    <el-input
      ref="input"
      v-model="insideValue"
      clearable
      @clear="onClear"
      @input.native="onInput"
      @keydown.native="onkeydown"
    >
      <el-button slot="suffix" type="text" @click="btnSelect">选择</el-button>
    </el-input>
  </div>

</template>
<script>
import { listDataMore, selectContainerStockByStore } from '@/api/goods/goods-sku.js'
import Select from './select.vue'
import layer from '@/views/components/TablePopIframe'
import cols from './select-cols.js'

export default {
  mixins: [cols],
  props: {
    value: {
      type: String,
      default: ''
    },
    formatColumnsData: {
      type: Function,
      default: (d) => { return d }
    }
  },
  data() {
    return {
      insideValue: '',
      iframe: null
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  created() {
    this.insideValue = this.value
  },
  methods: {
    setFocus() {
      this.$refs.input.focus()
    },
    btnSelect() {
    },
    closeSelect() {
      const iframe = this.iframe
      if (iframe) {
        iframe.$destroy()
        iframe.$el.parentNode.removeChild(iframe.$el)
        this.iframe = null
      }
    },
    handleSelectSure(row) {
      const { id, name } = row
      row.skuId = id
      this.$delete(row, 'id')
      this.insideValue = name
      this.$emit('on-select-data', row)
      this.closeSelect()
    },
    getColumnsData() {
      const columnsData = this.columnsData
      return this.formatColumnsData(columnsData)
    },
    getSearchData(e) {
      const keywords = e.target.value
      return { keywords }
    },
    //
    onGoodsSelect(data) {
      const { name } = data
      this.insideValue = name
    },
    onClear() {
      this.$emit('input', null)
    },
    onInput(e) {
      const columnsData = this.getColumnsData()
      const postMethod = listDataMore
      const container = e.target.parentNode
      const queryData = this.getSearchData(e)
      const props = { columnsData, postMethod, queryData }
      const content = Select
      if (!this.iframe) {
        const iframe = layer(container, content, props)
        this.iframe = iframe
        iframe.$on('on-select-data', ({ row }) => {
          this.handleSelectSure(row)
        })
      } else {
        const iframe = this.iframe
        iframe.searchGoods(queryData)
      }
    },
    onkeydown(e) {
      const iframe = this.iframe
      if (!iframe) return
      const { keyCode } = e
      const tableVm = iframe.$refs.table
      const currentRow = tableVm.getCurrentRecord()
      const tableData = tableVm.getTableData().tableData
      if (currentRow) {
        const currentIndex = tableVm.getRowIndex(currentRow)
        let index = 0
        if (keyCode === 38) index = currentIndex - 1
        if (keyCode === 40) index = currentIndex + 1
        const data = tableData[index]
        tableVm.setCurrentRow(data)
      } else {
        const data = tableData[0]
        tableVm.setCurrentRow(data)
      }
      if (keyCode === 13 && currentRow) {
        iframe.handleSelectSure({ row: currentRow })
      }
    }
  }
}
</script>

<style scoped>

</style>
